<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个slot</title>
    <script src="../lib/vue.js"></script>
</head>
<body>

<div id="box">
    <aaa>
        <p>我在写在自定义标签中的数据</p>
        <ul slot="ul-slot">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <ol slot="ol-slot">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ol>
    </aaa>
    <hr/>
    <aaa></aaa>
</div>

<template id="temp-a">
    <div>
    <h1>xxxx</h1>
    <slot name="ul-slot">这是默认数据</slot>
    <p>welcome</p>
        <slot name="ol-slot">这是默认数据2</slot>
    </div>
</template>

<script>
    new Vue({
        el: '#box',
        components: {
            'aaa': {
                template: '#temp-a'
            }
        }
    })
</script>

</body>
</html>